<template>
  <div v-if="userStore.open">
    <div class="container">
      <el-menu :default-active="activeIndex" mode="horizontal" background-color="#ffffff" text-color="#000000"
        active-text-color="#000000" @select="handleSelect">
        <el-menu-item v-for="item, index in source" :key="index" :index="index.toString()"> {{ item.label }}
        </el-menu-item>
      </el-menu>
    </div>
    <div style="height: 70vh;overflow-y: auto;">
      <el-card v-for="item, index in cardData" :key="index" class="box-card" style="margin: 10px;"
        @click="handleCard(index)">
        <h3>{{ item.title }}</h3>
        <p>{{ item.content }}</p>
      </el-card>
    </div>
  </div>
  <div v-else style="position: relative;">
    <div class="text-center">
      <el-button type="primary" :icon="ArrowLeft" circle @click="userStore.open = true" class="position-absolute" />
      <div class="text-container">
        <h1 style="text-align: center;margin:0">{{ TextCard?.title }}</h1>
        <div> <el-tag v-for="tag in TextCard?.tags" :key="tag" size="large" type="primary" style="margin: 10px 10px;">{{
          tag }}</el-tag></div>
        <VMarkdownView :mode="mode" :content="TextCard?.content"></VMarkdownView>
      </div>
      <footer class="text-footer">
        <el-button link class="img-one img"></el-button>
        <el-button link class="img-two img"></el-button>
        <el-button link class="img-three img" @click="handleDiscuss"></el-button>
      </footer>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from 'vue'
import { useUserStore } from '@/stores/use';
import { VMarkdownView } from 'vue3-markdown';
import { ArrowLeft } from '@element-plus/icons-vue'
import 'vue3-markdown/dist/vue3-markdown.css'
interface Card {
  title: string;
  content: string;
  tags: string[];
}
const userStore = useUserStore();
const activeIndex = ref('0');
const mode = ref('light')
const source = [
  { label: '全部' },
  { label: '前端' },
  { label: '后端' },
  { label: 'Java' },
  { label: 'C语言' },
  { label: 'C++' },
  { label: 'nodejs' },
  { label: 'JavaScript' },
  { label: 'PHP' },
  { label: 'JavaWeb' },
  { label: 'Golang' },
  { label: 'nginx' },
  { label: '电脑知识' },
  { label: 'Git' },
  { label: 'HTML+CSS+JS' },
  { label: 'react教学' },
  { label: 'Taro' },
]
const cardData = reactive<Card[]>([
  { title: '卡片1', content: '# 这是卡片1的内容', tags: ['Option1', 'Option2'] },
  { title: '卡片2', content: '这是卡片2的内容', tags: ['Option1', 'Option2'] },
  { title: '卡片3', content: '这是卡片3的内容', tags: ['Option1', 'Option2'] },
  { title: '卡片4', content: '这是卡片4的内容', tags: ['Option1', 'Option2'] },
  { title: '卡片5', content: '这是卡片5的内容', tags: ['Option1', 'Option2'] },
  { title: '卡片6', content: '这是卡片6的内容', tags: ['Option1', 'Option2'] },
  { title: '卡片7', content: '这是卡片7的内容', tags: ['Option1', 'Option2'] },
  { title: '卡片8', content: '这是卡片8的内容', tags: ['Option1', 'Option2'] },
  { title: '卡片9', content: '这是卡片9的内容', tags: ['Option1', 'Option2'] },
  { title: '卡片10', content: '这是卡片10的内容', tags: ['Option1', 'Option2'] },
]);
const cardIndex = ref(0)
const TextCard = computed(() => cardData[cardIndex.value])
const handleSelect = (key: string) => {
  activeIndex.value = key;
  console.log(`选中了第 ${key} 项`);
};
const handleCard = (index: number) => {
  cardIndex.value = index;
  userStore.open = false;
}
const handleDiscuss = () => {
  console.log('点击了评论按钮');

}
</script>

<style scoped>
.box-card {
  font-size: 14px;
}

.text-center {
  height: 80vh;
  font-size: 14px;
  color: black;
  overflow: hidden;
  margin: 0 auto;
  max-width: 60%;

}

.position-absolute {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
}

.text-container {
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
  background-color: #ffffff;
  height: 90%;
}

.text-footer {
  border-top: 1px solid #e8e8e8;
  background-color: #ffffff;
  height: 10%;
}

.img {
  background-size: cover;
  width: 30px;
  height: 30px;
}

.img-one {
  background-image: url('/public/不喜欢.svg');
}

.img-two {
  background-image: url('/public/点赞.svg');
}

.img-three {
  background-image: url('/public/评论.svg');
}
</style>
